<template>
  <main>
    <nav class="movie-nav">
      <ul>
        <li @click="handleCityClick">
          {{ city.name }}
          <span class="iconfont">&#xe665;</span>
        </li>
        <li>
          <router-link
            to="/home/movies/intheaters"
            tag="span"
            active-class="active"
            >热映</router-link
          >
          <router-link
            to="/home/movies/comingsoon"
            tag="span"
            active-class="active"
            >待映</router-link
          >
        </li>
        <li>
          <i class="iconfont">&#xe650;</i>
        </li>
      </ul>
    </nav>
    <div class="movies_list_box">
      <van-skeleton
        avatar
        avatar-shape="square"
        avatar-size="60"
        :row="3"
        :loading="showSkeleton"
        class="skeleton"
        v-for="(i, index) in 6"
        :key="index"
      >
      </van-skeleton>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <router-view :movie-list="movieList"></router-view>
        </van-list>
      </van-pull-refresh>
    </div>
  </main>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";

export default {
  data() {
    return {
      movieList: [],
      loading: false,
      finished: false,
      refreshing: false,
      limit: 10,
      url: "/mmdb/movie/v2/list/hot.json",
      offset: 0,
      hasMore: false,
      showSkeleton: true,
    };
  },

  computed: {
    ...mapState(["city"]),
  },

  async mounted() {
    await this.getList();
    this.showSkeleton = false;
  },
  methods: {
    handleCityClick() {
      this.$router.push("/citypicker");
    },
    async getList() {
      let result = await this.$http.get({
        url: this.url,
        params: {
          limit: this.limit,
          offset: this.offset,
          ct: this.city.name,
          ci: this.city.id,
        },
      });
      // this.movieList = result.data.hot;
      this.movieList = [
        ...this.movieList,
        ...result.data.hot,
        ...result.data.coming,
      ];
      this.hasMore = result.data.paging.hasMore;
    },
    async onLoad() {
      if (this.refreshing) {
        this.movieList = [];
        this.refreshing = false;
      }
      await this.getList();
      this.loading = false;
      if (!this.hasMore) {
        this.finished = true;
      }
      this.offset = this.offset + this.limit;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.offset = 0;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
  watch: {
    $route(to, from) {
      if (to.name === "intheaters") {
        this.url = "/mmdb/movie/v2/list/hot.json";
      } else {
        this.url = "/mmdb/movie/v1/list/wish/order/coming.json";
      }
      console.log(this.url);
      this.refreshing = true;
      this.onRefresh();
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/icon.styl'

main
    flex 1
    overflow hidden
    display flex
    flex-direction column
    .movie-nav
      > ul
        border1px(0 0 1px 0)
        display flex
        height .44rem
        li:first-child
          flex 100
          display flex
          justify-content flex-start
          align-items center
          color #666
          padding-left .15rem
          font-size .12rem
          span
            color #999
        li:nth-child(2)
          flex 231
          display flex
          justify-content center
          align-items center
          span
            display inline-block
            height .44rem
            width .6rem
            line-height .44rem
            text-align center
            color #666
            &:first-child
              margin-right .3rem
              margin-left -0.35rem
            &.active
              color #cd4c42
              border-bottom 2px solid #cd4c42
        li:last-child
          width .44rem
          border1px(0 0 0 1px)
          i
            font-size .2rem
            line-height .44rem
            text-align center
            color #cd4c42
            display block
  .movies_list_box
    flex 1
    overflow-y scroll
    .skeleton
      margin-top 10px
</style>
